<template>
  <div class="pd30 system">
    <div class="panelWrap system-main">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>系统平台管理</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <!-- <div class="inputLable inputLable1 flex flexac">
            <el-input v-model="param.id" class="input" placeholder="请输入地产品牌ID..." />
          </div> -->
          <div class="flex flexac">
            <el-input v-model="param.name" class="system-input" placeholder="请输入系统平台名称..." @input="getSystemList" />
          </div>
          <div class="groupbtn flex m-l-40 ">
            <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="getSystemList"><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button class="flexcenter co-empty m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清 空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷 新</el-button>
          <div class="m-r-25 flex">
            <el-button class="defaultbtn" type="primary" @click="handleAdd"><i class="el-icon-circle-plus-outline" />添加新系统</el-button>
            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button class="defaultbtn pre" type="primary" @click="handleSenior('field')"><i class="iconfont icon-shezhi" />字段
              </el-button>
              <div class="selectUl" :class="seniorSet.field?'showSelectUl':'hideSelectUl'">

                <div v-for="(item,i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button class="defaultbtn" type="primary" @click="handleSenior('sortable')"><i class="iconfont icon-shezhi" />排序</el-button>
              <div class="selectUl" :class="seniorSet.sortable ? 'showSelectUl' : 'hideSelectUl'">

                <div v-for="(item,i) in tablehead" v-if="item.isShow" :key="i" class="li">
                  <el-checkbox v-model="item.sortable">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <!-- <el-button class="defaultbtn" @click="handleExportExcel" type="primary"><i class="iconfont icon-shezhi"></i>固定</el-button> -->
          </div>
        </div>

        <el-table
          id="dataList"
          ref="dataList"
          class="con-table"
          type="expand"
          :data="dataList"
          highlight-current-row
        >
          <!-- <el-table-column width="90" type="selection" label="全选" /> -->

          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.index }}</span>
            </template>
          </el-table-column>

          <el-table-column label="系统平台ID" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column width="160" align="center" label="系统logo">
            <template slot-scope="scope">
              <el-image class="logo" :src="scope.row.logo" lazy>
                <div slot="error" class="image-slot">
                  <el-image class="errorImg" :src="url" lazy fit="fill" />
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column width="300" align="center" label="系统入口">
            <template slot-scope="scope">
              <!-- <el-link type="primary" :href="scope.row.entry" target="_blank">{{ scope.row.entry }}</el-link> -->
              <el-link type="primary">{{ scope.row.entry }}</el-link>
            </template>
          </el-table-column>

          <template v-for="item in tablehead">
            <el-table-column v-if="item.isShow" :key="item.index" align="center" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
          </template>

          <!-- <el-table-column label="是否系统平台" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isSys ? '是' : '否' }}</span>
            </template>
          </el-table-column> -->

          <el-table-column label="是否需要绑定微信" align="center">
            <template slot-scope="scope">
              <div title="平台需绑定微信" :class="`wechat${scope.row.isWechat} iconfont ${scope.row.isWechat === true ? ' icon-weixin' : ''}` " />
            </template>
          </el-table-column>

          <!-- <el-table-column label="是否删除" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isDel ? '是' : '否' }}</span>
            </template>
          </el-table-column> -->

          <el-table-column prop="name" align="center" label="基本操作" width="200">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit" />编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="paginationWrap flex"
          :current-page="paging.pageIndex"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <SystemEdit v-model="visible" :data="editSystem" :is-edit="isEdit" @handleRefresh="handleRefresh" @handleCloseDialog="handleCloseDialog" />

  </div>
</template>

<script>

import SystemEdit from './dialog'
import { findSysList } from '@/api/baseInfo/authority/sys'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'Unnamed',
  components: {
    SystemEdit
  },
  props: {},
  data() {
    return {
      dataList: [],
      visible: false,
      editSystem: {},
      isEdit: false,
      refresh: false,
      url: require('@/assets/lbxx.png'),
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'name',
          label: '系统名',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'nameSimple',
          label: '简称',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ],
      paging: {
        pageIndex: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },
      param: {
        id: null,
        name: ''
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSystemList()
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/authority/system/index' }))
  },
  methods: {
    handleDetail(index, row) {
      this.$router.push({
        name: 'system-detail',
        params: { index, row }
      })
    },
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
      }
      if (type === 'sortable') {
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['系统平台ID', '是否需要微信登陆', '系统入口', '系统logo', '简称', '系统名']
        const filterVal = ['id', 'isWechat', 'entry', 'logo', 'nameSimple', 'name']
        const data = this.formatJson(filterVal, this.dataList)
        export_json_to_excel(tHeader, data, '系统平台表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getSystemList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    // getSystem() {
    //   findSysList(this.param.id, this.param.name, this.paging.pageIndex, this.paging.pageSize).then(res => {
    //     this.dataList = res.data.filter(item => {
    //       if (item.name.toLowerCase().indexOf(this.param.name) > -1) {
    //         return this.dataList.push(item)
    //       }
    //     })
    //     this.handleSearch(this.dataList)
    //   })
    // },
    // handleSearch(name) {
    //   if (this.param.name === '') {
    //     this.getSystemList()
    //   }
    // },
    getSystemList() {
      findSysList(this.param.id, this.param.name, this.paging.pageIndex, this.paging.pageSize).then((res) => {
        if (res.code === '000000') {
          // console.log(res)
          this.dataList = res.data.map((item, i) => {
            const items = {
              index: i + 1,
              entry: item.entry,
              id: item.id,
              isWechat: item.isWechat,
              logo: item.logo,
              name: item.name,
              nameSimple: item.nameSimple,
              version: item.version
            }
            return items
          })
          this.paging = {
            pageIndex: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }
      })
    },
    handleEmptySearch() {
      this.param.name = ''
      this.getSystemList()
    },
    handleEdit(index, row) {
      this.visible = true
      this.isEdit = true
      this.editSystem = {
        id: row.id,
        logo: row.logo,
        entry: row.entry,
        name: row.name,
        nameSimple: row.nameSimple,
        isWechat: row.isWechat ? '需要' : '不需要',
        version: row.version
      }
    },
    handleAdd() {
      this.visible = true
      this.isEdit = false
      this.editSystem = {
        entry: '',
        id: 0,
        isWechat: '',
        logo: '',
        name: '',
        nameSimple: '',
        version: 1
      }
    },
    handleCloseDialog() {
      this.visible = !this.visible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSystemList()
    },
    handleCurrentChange(val) {
      this.paging.pageIndex = val
      this.getSystemList()
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/public.scss';

.system {
  width: 100%;
  .system-main {
    width: 100%;
    margin: 0;
    .errorImg, .logo {
      display: inline-block;
      width: 25px;
      height: 25px;
    }
    .system-input {
      width: 300px;
    }
    .icon-qingkong:before {
      margin-right: 4px;
    }
    .wechattrue {
      color: #3cb371;
      font-size: 30px;
      line-height: 30px;
    }
  }
}

</style>
